如 何 实 现 目 己 的 
jQuery 


a | Published 
Wlzaralorce with GitBook 


如 何 实现 自己 的 jQuery 


绍 

讲解 基础 框架 格式 

初步 体验 

新 增 next,prev,parent,parents 

完善 init 方 法 

新 增 必 备 方法 each 

新 增 find,last,eq,get,first,ajax 

完善 hasClass 和 css 方法 新 增 data 和 attr 方 法 
新 增 html，remove，after，append ，before 方 法 
引入 delegate 机 制 

如 何 实现 on 与 off 

实现 事件 委托 

最 后 一 节 补 充 width,height,extend 


GO om、~ ODN 上 nmP 局 一品 


= 一 
记 一 吕 


可 想 造 一 个 属于 你 自己 的 jQuery 库 ? 


作者 : MeCKodo 
来 源 : forchange 


e [x] 0. 讲 解 基础 框架 格式 
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e 1. 给 一 些 很 想 自 己 实现 一 个 jQuery 或 者 是 对 实现 jQuery 非常 好 奇 的 人 

e@ 2. 想 提升 自己 js 基础 的 小 伙伴 

e。 3. 本 教程 系列 不 考虑 兼容 和 性 能 问题 ,只 考虑 如 何 利 用 各 种 巧妙 的 方法 去 实 
现 一 个 一 模 一 样 的 API 

e 4. 从 dom 操 作 一 直到 事件 机 制 on(),off() ,全 会 未 现 ( 事 件 机 制 是 本 
人 思考 后 的 另类 设计 , 纯 原创 ) 


本 人 一 直 很 想 自己 造 个 jQuery 的 小 库 , 第 一 是 满足 下 自己 ,第 二 是 去 体验 下 jQuery 内 
部 的 基 情 | 


虽 然 jQuery 很 多 源码 看 不 懂 , 但 是 凭借 着 对 jQuery 的 API 实 现 的 效果 ,我 也 基本 实现 了 
这 样 一 个 类 库 . 


由 于 自己 看 别人 源码 的 时 候 经 常会 想 ,作者 要 是 能 一 步 一 步 的 告诉 我 他 是 怎么 写 怎么 
想 的 就 好 了 :). 


接 下 来 ,我 会 在 每 一 个 version 里 写 下 我 每 一 步 的 想法 ,让 你 了 解 到 你 如 何 也 能 自己 造 
一 个 这 样 的 轮子 . 


希望 我 的 做 法 能 给 你 带 来 许多 的 启发 .( 即 使 我 在 里 面 写 的 代码 实在 是 不 值得 一 提 ) 
另外 您 的 star, 是 我 的 最 大 动力 ! 
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[x] 10.tap 实 现 (番外 篇 ) 
[x] 11. 简 单 的 一 些 手势 (番外 篇 ) 


Lesson-0 


首先 第 一 个 版 本 ,我 们 要 先 了 解 搭建 一 个 库 或 者 是 一 个 给 别人 使 用 的 小 插件 应 该 用 一 
种 什么 样 的 格式 . 


首先 我 们 需要 创建 一 个 闭 包 


(function(){ 
/Eoder 


})(); 


然后 将 我 们 所 需要 的 代码 和 人 逻辑 都 写 在 里 面 避免 全 局 变量 的 泛滥 
接着 我 们 来 看 看 我 们 第 一 版 里 的 代码 ， 


(function(window,document) { 
var WwW = window, 
doc = document; 
var Kodo = function(selector) { 
return new Kodo.prototype.init(selector); 
} 
Kodo.prototype = { 
constructor : Kodo, 
length : 0, 
splice: [].splice, 
selector : '', 
init : function(selector) {//dom 选 择 的 一 些 判 断 


} 
} 
Kodo.prototype.init.prototype = Kodo.prototype; 
Kodo.ajax = function() { // 直 接 挂 载 方 法 可 k.ajax 调 用 
console.1log(this); 


} 


window.f = Kodo; 
}) (window, document ) ， 


我 创建 了 一 个 闭 包 , 传 入 了 window,document 并 且 在 内 部 将 他 们 缓存 起 来 . 
接着 


var kodo = function(selector) { 
return new Kodo.prototype.init(selector); 
} 


如 果 有 看 过 jQuery 源码 的 童鞋 对 这 个 里 是 在 了 解 不 过 了 ,每 次 用 kodo 调 用 的 时 候 ,将 
直接 返回 一 个 kodo 的 实例 .达到 无 new 调 用 的 效果 


Kodo ,prototype = { 
constructor : Kodo, 
length : 0， 
splice: [].splice, 
selector 9 
init : function(selector) {//dom 选 择 的 一 些 判 断 


} 


} 
Kodo.prototype.init.prototype = Kodo.prototype; 


接着 重点 就 在 于 如 何 去 构 造 Kodo 的 prototype 的 原型 了 .在 这 上 面 的 属性 也 就 相当 于 
是 jQuery 的 实例 方法 和 属性 .所 以 每 次 $() 后 都 能 链 式 调用 . 


由 于 我 们 是 return new Kodo.prototype.init, 那 自然 ,我 们 需要 手动 的 把 init 的 prototype 
指向 Kodo 的 prototype 


同时 我 们 在 原型 上 具有 splice 属 性 后 ,我 们 的 对 象 就 会 变 为 了 一 个 类 数组 对 象 ,神奇 吧 | 
Kodo.ajax = function() { // 直 接 挂 载 方法 “可 咎 .ajax 调用 
console.1log(this); 
} 
由 于 javascript 中 一 切 异 对 得 ,所 以 我 们 能 在 我 们 的 Kodo 上 直接 用 .XXX 来 赋 子 新 的 属 


性 和 方法 ,这 样 的 方法 也 被 称 之 为 静态 方法 ， 


window.f = Kodo; 


最 后 我 们 在 Window 上 对 外 暴露 一 个 接口 ,我 们 就 可 以 愉快 的 用 f.ajax 或 者 是 f("#id") 
即 可 调用 . 


虽然 我 很 low, 但 是 你 看 都 看 完了 难道 还 不 给 star?! 


Lesson-1 


这 个 版 本 呢 , 先 来 加 四 个 很 简单 的 方法 感受 感受 下 ! 
首先 3 个 class 不 用 说 了 


hasClass : function(cls) { 
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); 
for (var i = 0; i < this.length; i++) { 
if (this[i].className.match(reg)) return true; 
return false; 


} 


return this; 
}, 
addClass : function(cls) { 
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); 
for (var i = 0; i < this.length; i++) { 
if(!this[i].className.match(reg)) 
this[i].className += ' ' + cls,; 


} 


return this; 
}, 
removeClass : function(cls) { 
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); 
for (var i = 0; i < this.length; i++) { 
If (this[i].className.match(reg)) 
this[i].className = this[i].className.replace(cls,''); 


} 


return this; 
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然后 新 增 一 个 


css : function(attr,val) {// 链 式 测试 

console.log(this.1length); 

for(var i = 0;i < this.length; i++) { 
if(arguments.length == 1) { 

return getComputedSstyle(this[i],null)[attr]; 

} 
this[il].style[attr] = val; 

} 


return this; 


这 些 其 实 都 很 简单 ,我 们 都 要 记 住 ,我 们 封装 的 DOM 对 象 是 一 个 数组 ,所 以 一 定 都 需要 
用 循环 来 进行 各 种 个 样 的 处 理 . 


然后 css 这 我 是 用 arguments 的 个 数 来 进行 判断 是 取 值 还 是 社 值 . 
最 后 千 万 别 忘 了 每 个 方法 的 最 后 都 要 return this 以 便 链 式 调用 . 
大 家 可 以 自行 拿 这 几 个 方法 log 出 来 看 看 是 否 是 与 jQuery 的 一 样 就 知道 是 否 成 功 了 . 


Lesson-2 


这 个 版 本 新 增 next(),prev(),parent(),parents() 
这 4 个 选择 元 素 的 方法 还 是 比较 常用 的 


首先 我 们 需要 一 个 func 来 过 滤 我 们 需要 的 dom 


Functnion subimo(eur dar 
while ((cur = cur[dir]) && cur.nodeType !== 1) 人 0 
return cur; 


上 面 那 段 比较 简单 ,就 是 普通 的 过 滤 下 元 素 


next : function() { 
return sibling(this[0], "nextSibling"); 
}, 
prev : function() { 
return sibling(this[0], "previousSibling"); 


}, 


看 下 next 方 法 的 源码 就 知道 ,我 传 入 Kodo 数 组 对 象 的 0 个 dom 对 象 , 然 后 取 它 的 下 一 个 
同 莫 元 素 ,直接 返回 ,prev 方 法 同 理 


parent : function() { 

var parent = this[0].parentNode; 

parent && parent.nodeType !== 11 ? parent : null; 

var a = Kodo(); 
a[0] = parent; 
a.selector = parent.tagName.toLocaleLowerCase( ); 
a.length = 工 ; 

return a; 


}, 


这 段 是 取 到 第 一 个 父 元 素 , 由 于 parent() 返 回 的 不 是 原生 的 DOM 对 象 ,是 封装 过 的 数组 
对 象 (Kodo), 那 我 们 就 想 办 法 构造 一 个 新 的 Kodo 对 象 即 可 


所 以 我 在 里 面 var 了 一 个 Kodo, 然 后 设置 这 个 Kodo 数 组 对 象 的 selector 等 配置 ,然后 直 
接 返回 这 个 新 的 Kodo 对 象 


parents : function() { 
var a = Kodo(), 
I = OF 
while ( (this[0] = this[0][ 'parentNode' ]) && this[0].nodeTypk 
if ( this[0].nodeType === 1 ) { 
a[i] = this[0]; 
i++， 


} 


} 
a.length = i; 
return a; 


} 
剧 


同 理 ,在 jQuery 的 parents 方 法 中 ,返回 的 依旧 是 jQuery 对 象 .我 们 依旧 用 上 面 的 办 法 , 构 
造 一 个 新 对 象 并 且 返 回 就 好 了 ! 


中 间 一 层 while 循 环 ,依次 过 滤 出 我 们 需要 的 dom 元 素 , 然 后 把 他 们 都 赋值 到 我 们 新 var 
的 对 象 里 ,最 后 别 忘 了 设置 一 下 新 对 象 的 length 属 性 ,返回 我 们 的 新 对 象 即 可 ! 


看 了 上 面 几 个 方法 是 不 是 觉得 ! 其 实 很 多 时 候 我 们 完全 可 以 自己 新 创建 一 个 对 象 , 然 
后 配置 好 它 直 接 返 回 这 个 新 对 象 .比如 find 方 法 我 们 也 可 以 用 这 样 的 办 法 :) 





Lesson-3 


修改 f(selector) 里 的 判断 ,新 增 domReady 
我 们 知道 在 jQuery 中 还 有 一 种 选择 器 写法 


$(function() { 


}); 


在 dom 加 载 完 毕 后 马上 就 执行 ,这 样 的 方法 会 比 onload 更 快 ,所 以 domReady 对 于 我 们 
来 说 一 定 是 必 不 可 少 的 


我 们 在 init 方 法 中 要 新 增 以 下 判断 


if(!selector) { return this; } 


if (typeof selector == 'object') { 
Var selector = [selector]; 
for (var i = 0; i < selector.length; i++) { 
this[i] = selector[i]; 


this.length = Selector. Length 
return this; 


} else if (typeof selector == 'function') { 
Kodo.ready(selector); 
return,; 

} 


首先 selector 可 能 为 object 的 情况 ,比如 传 入 的 是 原生 dom 对 象 ,dom 数 组 对 象 . 另外 要 
记得 转 为 数组 `var selector = [selecton]; 


为 有 可 能 是 一 个 元 素 比 如 是 window,document 等 否则 没 法 循环 
然后 selector 如 果 是 function 那 我 们 就 认为 他 是 domReady 
PS: 在 这 我 判断 的 并 没有 非常 的 全 面 ,仅仅 具备 了 基础 功能 


Kodo .ready = function(fn) { 


doc.addEventListener('DOMContentLoaded',function() { 
fn && fn(); 

},false); 

doc.removeEventListener('DOMContentLoaded',fn,true); 


2 


然后 这 个 是 ready 的 源码 ,由 于 我 们 只 兼容 高 端 浏览 器 所 以 仅仅 需要 这 样 写 即 可 . 


既然 你 都 看 到 这 了 ,还 不 给 我 一 个 star 说 得 过 去 么 你 1 :( 


Lesson-4 


这 个 版 本 我 们 要 增加 一 个 用 的 非常 多 的 方法 ! 
那 就 是 eachl 
我 们 知道 each 不 仅 能 遍历 数组 ,还 能 遍历 对 象 . 


首先 我 们 需要 一 个 对 数组 进行 验证 的 方法 


function isArray(obj) { 
return Array.isArray(obj); 


} 
接着 就 是 我 们 的 重头 戏 


Kodo .each = function(ob]j,callback) { 
var len = obj.length, 
constru = obj.constructor, 
1 O08 


if(constru === window.f) { 
for (; i < len; i++) { 
var val = callback.call(obj[i],i,obj[i]); 
if(val === false) break; 


} 
} else if (IsSArray(obj)) { 
站 Ole art 
var val = callback.call(obj[i],i,obj[i]); 
if(val === false) break; 


} 
} else { 
for( i in obj ) { 


var val = callback.call(obj[i],i,obj[i]); 
if(val === false) break; 


ee 


因为 我 们 还 可 能 遍历 Kodo 数 组 对 象 
如 


f("div").each(function(index,item) { 


}) 


所 以 还 需要 一 个 判断 是 否 是 Kodo 数 组 对 象 


if(constru === window.f) { 
Om < enor td 
var val = callback.call(obj[i],i,obj[i]); 
if(val === false) breatk,; 


在 这 应 该 强调 下 call 的 用 法 ,还 是 很 多 人 不 知道 call 何 时 使 用 . 


在 我 们 的 callback 里 第 一 个 参数 是 下 标 ,第 二 个 参数 是 当前 的 对 象 ,然后 this 还 要 指向 
他 自己 


所 以 callback.call(obj[i],i,obj[i]); 就 是 这 样 写 第 一 个 参数 是 改变 this 指 
向 ,第 二 个 参数 是 下 标 , 第 三 个 是 自己 本 身 


很 简单 不 是 吗 ? 


既然 你 都 看 到 这 里 了 ,还 不 给 我 一 个 star?1 


Lesson-5 


这 个 版 本 新 增 6 个 方法 ,find(),first(),last(),eq(),get(),ajax 
先 给 出 代码 


find : function(selector) { 
if(!selector) return; 
Var context = this.selector; 
return new Kodo(context + ' ' + selector); 
}, 
Tiest functerom( de 
return new Kodo(this[0]) 
}, 
last : function() { 
var num = this.length - 1; 
return new Kodo(this[num|); 


eq : function(num) { 
var num = num < 0 ? (this.length - 1) : num; 
console.1log(num); 
return new Kodo(this[num]); 


get : function(num) £ 
var num = num < 0 ? (this.length - 1) : num; 
console.1log(num); 
return this[num]; 


我 们 要 仔细 分 辨 下 ,这 4 个 方法 在 jQuery 中 返回 的 都 是 什么 对 象 ?到 底 是 dom 对 象 还 是 
jQuery 对 象 . 


明白 了 这 个 后 就 很 容易 能 写 出 这 4 个 方法 


find : function(selector) { 
if(!selector) return,; 
var context = this.selector; 
return new Kodo(context + ' "' + selector); 


首先 find, 我 们 知道 一 般 都 会 这 样 写 $('div').find('span') 查找 div 下 的 span, 返 回 的 是 
span 数 组 对 象 ,而 不 是 原生 的 dom 对 象 


那么 我 们 就 可 以 换个 思路 ,因为 我 们 能 拿 到 $('div') 这 个 selector 对 吧 ? 也 就 是 div 


既然 又 要 find('span'), 我 们 的 selector 就 可 以 写成 (div span'), 之 后 直接 返回 新 的 数组 
对 象 不 就 好 了 吗 ?? 


var context = this.selector; 先 缓存 当前 的 selector 上 下 文 ,之 后 拼接 我 们 
find 的 Selector 


所 以 最 后 return 就 变 为 new Kodo(context + ' ' + selector); 虽然 效率 不 一 
定 高 ,总 是 一 种 解决 思路 不 是 吗 ? 


Furmsto :funceionO nt 
return new Kodo(this[0]) 
}, 
as Runetiom( 
var num = this.length - 1; 
return new Kodo(this[num|); 
}, 
eq : function(num) { 
var num = num < 0 ? (this.length - 1) : num; 
console.1log(num); 
return new Kodo(this[num|); 


get : function(num) £ 
var num = num < 0 ? (this.length - 1) : num; 
console.1log(num); 
return this[num]; 


find 方 法 比较 难 解 决 ,之 后 这 4 个 就 很 容易 了 ,first,last,eq, 分 别 返 回 的 都 是 封装 后 的 对 
象 ,只 有 get 返 回 的 是 原生 dom 对 象 . 


我 们 根据 之 前 的 思路 ,直接 取 数 组 对 象 的 index,return 下 新 的 即 可 ,是 不 是 很 简单 ? :) 
之 后 是 ajax 部 分 


之 前 说 过 之 所 以 ,可 以 用 $.ajax 直接 调用 ,是 因为 可 以 把 方法 直接 挂 在 在 构造 函数 
上 ,作为 静态 方法 


所 以 我 们 只 需要 写 好 ajax 最 后 把 你 想 要 公开 的 接口 放 在 Kodo 上 即 可 


Kodo ,get = function(url,sucBack,complete) { 
Var options = { 
Url : url, 
success : sucBack, 
complete : complete 
}; 
ajax(options); 
}; 
Kodo.post = function(url,data,sucback,complete) { 
var options = { 
Url : url, 
type : "POST", 


小 


data : data, 

sucback : Sucback ， 

complete : complete 
}; 


ajax(options); 


function ajax(options) { 


Var defaultOptions = { 
url: false，//ajax 请 求 地 址 
type : "GET", 
data : false, 
success: false，// 数 据 成 功 返回 后 的 回调 方法 
complete: false //ajax 完 成 后 的 回调 方法 


}; 
for (var i In defaultOptions) { 
If (options[i] === undefined) { 
options[i] = defaultOptions[i]; 
} 
} 


Var xhr = new XMLHttpRequest(); 

var Url = options.url; 
xhr.open(options.type, url); 
xhr.onreadystatechange = onStateChange; 
If (options.type === 'POST') { 


xhr.setRequestHeader('Content-Type', 'application/x-www-foi 


xhr.send(options.data ? options.data : null]l); 


function onStatechange() { 
If (xhr.readyState == 4) { 
var result, 
status = xhr.status,; 


If ((status >= 200 && status < 300) || status == 304) 1 


result = xhr.responseText; 
if (window.JSON) 1 
result = JSON.parse(result); 
} else { 
result = eval('(' + result + ')'); 


} 
ajaxSuccess(result, xhr) 
} else { 
console.1log("ERR", xhr.status); 
} 
} 
} 
function'ajaxsuccess(datar xhr) 
Var status = 'success'; 
options.success && options.success(data, options, status, 
ajaxComplete(status) 
} 


function ajaxComplete(status) { 
options.complete && options.complete(status); 


) 








在 这 我 就 不 细 讲 ajax 的 具体 过 程 ,我 也 实现 了 一 个 比较 简单 的 ajax, 就 公开 了 get 和 
post 方 法 .大 家 可 以 实现 一 个 更 加 复杂 好 用 的 ajax 替换 我 这 段 代 码 


你 说 你 都 耐心 的 翻 到 这 了 ? 不 给 我 一 个 star 说 的 过 去 么 你 ? 


Lesson-6 


这 个 版 本 完善 hasClass 和 css 方法 . 


新 增 attr 和 data 


css: function(attr，Vval) { // 链 式 测试 


for (var i = 0; i < this.length; i++) { 
if(typeof attr == 'string') { 
if (arguments.length == 1) { 
return getComputedSstyle(this[0], null)l[attr]; 


} 
this[i].style[attr] = val; 
} else { 
var _this = this[i]; 
f.each(attr,function(attr,val) { 
_this.style.cssText += '' + attr + ':' + Val + ';', 
}); 
} 


return this; 





在 我 们 上 一 个 版 本 中 ,没有 对 css 方 法 传 对 象 进行 解析 ,在 这 我 们 要 进行 完善 ， 
刚刚 好 我 们 现在 已 经 有 了 each 方 法 ! 直 接 用 上 吧 | 
在 我 们 的 for 循 环 中 ,要 先 判断 下 传 入 的 attr 参 数 是 字符 串 还 是 对 象 . 


如 果 是 字符 串 ,我 们 就 按照 css('width','100px') 这 样 的 方式 处 理 


如 果 是 对 象 css({"width":'100px', 'height':'200px'}) 


var _this = this[i]; 
f.each(attr,function(attr,val) { 

_this.style.cssText += '' + attr + ':' + Val + ';'; 
}); 


首先 我 们 缓存 下 当前 的 this, 然 后 用 cssText 方 法 ,直接 拼接 进去 即 可 . 


接着 我 们 需要 完善 hasClass 方 法 .这 里 要 着 重 说 明 下 ! 目 前 我 搜 到 的 一 大 堆 hasClass 
方法 与 jQuery 的 实现 都 是 不 同 的 


比如 有 这 样 的 dom 结 构 


<div id="pox"> 
<ul> 
<]li class="a c">pox</1i> 
<li class="b">pox</1i> 
<l1i>pox</1i><1i>pox</1i> 
<1i>pox</1i> 
</U]> 
</div> 


我 们 如 果 写 $(#pox li 门 .hasClass(b) 与 $(##pox li").hasClass('a') 那 都 会 是 什么 样 的 结 
有 果 呢 ? 


结果 是 都 会 返回 true. 
而 现在 基本 能 搜 到 的 完全 没有 做 这 方面 的 判断 .所 以 我 们 来 看 看 我 是 如 何 实现 的 


hasclass : function(cls) { 
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); 
var arr = []; 
for (var i = 0; i < this.length; i++) { 
If (this[i]j.className.match(reg)) { 
return true; 


} 


return false; 


首先 我 们 需要 一 个 正则 匹配 ,还 需要 一 个 数组 ,进行 存储 每 个 元 素 是 否 有 存在 判断 的 
Class 


然后 我 们 再 在 那个 数组 中 寻找 是 否 有 true? 如 果 有 true， 则 返回 true, 如 果 一 个 true 都 没 
有 的 情况 下 ,才能 完全 返回 false. 希 望 大 家 在 这 里 要 注意 以 下 


最 后 是 我 们 的 attr 和 data 方 法 


ace afunctionmlatt vad) 
for (var i = 0; i < this.length; I++) { 
if(typeof attr == 'string') { 
if (arguments.length == 1) { 
return this[i].getAttribute(attr); 
} 


this[i].setAttribute(attr,val); 
} else { 
var _this = this[i]; 
f.each(attr,function(attr,val) { 
_this.setAttribute(attr,val); 
}); 
} 
} 
returm this; 
}, 
data : function(attr, val) { 
for (var i = 0; i < this.length; i++) { 
if(typeof attr == 'String') { 
if (arguments.length == 1) { 
return this[i].getAttribute('data-' + attr)， 
} 


this[i].setAttribute('data-' + attr,val); 
} else { 
var _this = this[i]; 
f.each(attr,function(attr,val) £ 
_this.setAttribute('data-' + attr,val); 


}); 
} 
} 


return this; 


这 两 个 方法 就 很 简单 啦 , 跟 CSS 方 法 类 似 , 先 判断 第 一 个 参数 是 否 为 字符 串 ,如 果 是 字 
符 串 就 是 直接 增加 一 个 属性 .如 果 是 对 象 ,就 each 下 一 个 一 个 set 即 可 . 


毛 主 席 说 过 ,只 阅 不 star 都 是 要 流 谍 ! :( 


Lesson-7 


新 增 html,text,append,before,afterremove 


html: function (value) { 


if (value === undefined && this[0].nodeType === 1) { 
return this[0].innerHTML,; 
} else { 


for (var i = 0; i < this.length; i++) { 
this[i].innerHTML = value; 


return this; 


}, 
text: function (val) { 
if (val === undefined && this[0].nodeType === 1) { 
return this[0].innerText,; 
} else { 
for (var i = 0; i < this.length; i++) { 
this[i].innerText = val; 
} 
} 


html() 方法 我 就 用 了 这 种 很 轴 套 的 方法 实现 了 ! 比 起 之 前 的 datauattr css 什 么 的 简 
单 多 了 ,大 家 可 以 自己 继续 完善 . 


接着 是 我 们 的 重头 戏 ,3 个 文档 插入 .我 找到 了 一 个 原生 js 呵呵 的 方法 
insertAdjacentHTML 来 让 我 们 去 看 下 MDN 是 怎么 解释 的 


insertAdjacentHTML() 将 指定 的 文本 解析 为 HTML 或 XML， 然后 将 结果 节点 
插入 到 DOM 树 中 的 指定 位 置 处 。 该 方法 不 会 重新 解析 调用 该 方法 的 元 素 ， 
此 不 会 影响 到 元 素 内 已 存在 的 元 素 节点 。 从 而 可 以 避免 额外 的 解析 操作 ， 
接 使 用 innerHTML 方法 要 快 。 


下 法 


element ,insertAdjacentHTML(position，text)， position 是 相对 于 
element 元 素 的 位 置 ， 并 且 只 能 是 以 下 的 字符 串 之 一 : 


beforebegin 在 element 元 素 的 前 面 。 afterbegin 在 element 元 素 的 
第 一 个 子 节点 前 面 。 beforeend 在 element 元 素 的 最 后 一 个 子 节点 后 面 。 
afterend 在 element 元 素 的 后 面 。 text 是 字符 串 ， 会 被 解析 成 HTML 
或 XML ， 并 插入 到 DOM 树 中 。 


兼容 性 
Chrome Firefox IE Opera Safari 
1.0 8.0 4.0 7.0 4.0 
简直 神器 有 木 有 ?1 


所 以 我 们 写 一 个 这 样 的 方法 吧 | 


function domAppend(elm，type，str) { // 实 现 append、after、before 操 人 
elm.insertAdjacentHTML(type, str); 
} 


1 
然后 只 需要 传 对 应 参数 就 好 了 ! 如 此 简单 


append: function (str) { 
for (var i = 0; i < this.length; i++) { 
domAppend(this[i], 'beforeend', str); 


return this; 


}, 


before: function (str) £ 
for (var i = 0; i < this.length; i++) { 
domAppend(this[i], 'beforeBegin', str); 


return this; 


}, 


after functionn (str) 
for (var i = 0; i < this.length; i++) { 
domAppend(this[i], 'afterEnd', str); 


return this; 


接着 是 remove 方 法 ,在 这 我 只 做 删除 自身 节点 ,就 没 继续 拓展 了 .大 家 可 以 自行 完善 


remove: function () { // 只 能 删除 自身 
for (var i = 0; i < this.length; i++) { 
this[i].parentNode.removeChild(this[i]); 


return this; 


您 给 予 的 star, 就 是 给 代码 赋予 灵魂 . 


Lesson-8 


事件 机 制 


在 讲 事件 机 制 之 前 呢 , 我 们 有 一 个 很 重要 的 东西 要 先 讲 , 那 就 是 如 何 实现 事件 委托 ( 代 
理 ). 


只 有 必须 先 明 白 了 如 何 实现 一 个 事件 委托 ,我 们 才能 更 好 的 去 实现 on 和 off. 在 我 看 
来 ,On 和 off 里 最 难 实现 的 就 是 他 的 事件 委托 . 


function delegate(agent, type,selector, fn) { 
agent.addEventListener(type,function(e) { 


var target = e.target,; 
Var ctarget = e.currentTarget; 
var bubble = true; 


while(bubble && target != ctarget) { 
if(filiter(agent,selector,target)) { 
bubble = fn.call(target, e); 
return bubble; 


} 


target = target.parentNode; 


} 
alsed), 
function filiter(agent,selector,target) { 
var nodes = agent .querySelectorAll(selector); 
for (var i = 0; i < nodes.length; i++) { 
if (nodes[i] == target) { 
return true; 
} 


以 上 是 我 对 整个 委托 的 实现 ,当然 在 这 只 做 了 非常 简单 的 实现 ,没有 对 很 多 别 的 情况 
进行 判断 ,也 没有 多 个 参数 是 否 捕捉. 


我 们 先 拆 解 下 分 析 . 


function filiter(agent,selector, target) 1 
var nodes = agent.querySelectorAll(selector); 
for (var i = 0; i < nodes.length; i++) { 
If (nodes[i] == target) { 
return true; 
} 


先 看 这 个 方法 ,这 其 实 就 是 一 个 元 素 过 滤 , 作 用 就 是 为 了 过 滤 出 我 们 委托 的 元 素 具 体 
是 作 {aroel 了 是 我 们 具体 的 安 折 元 六 
agent.addEventListener(type,function(e) { 
var target = e.target,; 
var ctarget = e.currentTarget; 
var bubble = true; // 是 否 阻止 冒 泡 
while(bubble && target != ctarget) { 
if(filiter(agent,selector,target)) { 
bubbljle = fn.call(target, e); 
} 


target = target.parentNode; 
return bubble; 


} 
},false); 


后 是 我 们 的 主要 部 分 .其 实 这 里 就 很 简 单 ,while 的 条 件 判 断 两 个 ,第 一 个 是 是 否 阻止 
外 他 第 一 个 六 新 证 泡 是 否 到 顶 . 


接着 我 们 进行 fliter 进 行 过 滤 , 如 果 返 回 true, 则 是 我 们 的 委托 元 素 ,直接 call 即 可 . 
如 果 不 做 过 多 的 兼容 处 理 ,实现 一 个 委托 还 是 比较 容易 的 . 


PS: 如 果 您 还 是 不 太 明 白 ,可 以 来 这 看 更 具体 的 解释 .http://www.meckodo.com/? 
p=309 


您 的 star 是 检验 代码 的 唯一 标准 |:) 


Lesson-9 


关于 事件 部 分 ,我 思考 了 很 久 ,也 参考 了 许多 ,到 底 如 何 能 用 一 个 很 简单 的 方法 实现 一 
模 一 样 的 on、off 呢 ? 


最 后 我 的 设计 思路 是 : 
1. 有 一 个 全 局 存储 所 有 Events 的 数组 ， 存 放 每 个 dom 元 素 上 的 事件 。 


2. 给 每 个 DOM 一 个 guid 的 唯一 标识 符 ， 通 过 这 个 guid 来 找 出 Events 数 
组 里 的 事件 。 


由 于 逻辑 比较 复杂 ， 我 们 先 来 画 个 图 看 看 。 









-中 一 不 存在 5 在 





Events[guid] = evt 


evt={"click":[fn1...]} 






[evt1l,evt2,evt3...] 


首先 ， 我 们 利用 DOM 可 以 增加 自 定义 属性 的 原理 ， 在 它 的 身上 存 一 个 guid 。 
之 后 整个 事件 机 制 就 根据 这 个 guid 来 进行 查找 与 存储 。 
接 下 来 是 代码 部 分 


// 事 件 绑 定 存放 的 事件 


Kodo ,Events 区 
// 事 件 绑 定 的 唯一 标识 


= 
Kodo.guid = 0; 
on: function(type, selector, fn){ 
If (typeof selector == 'function') { 
fn = selector; /7 两 个 参数 的 情况 
for (var i = 0; i < this.length; I++) { 
If (!this[i].guid) { 
this[i].guid = ++Kodo.guid; 
//guid 不 存在 ， 给 当前 dom 一 个 guid 


Kodo .Events[Kodo.guid] = 他; 
WS 
* 给 Events[guid] 开辟 一 个 新 对 其 
* 用 于 存储 这 个 dom 上 的 所 有 事件 方法 
区 


Kodo. Events [Kono. guid][type] = [fn]; // 每 个 方法 都 是 一 
/H/T lek mn 


bind(this[i]，type，this[i].guid);// 绑 定 事 件 


} else {//guid 疮 在 的 情况 

var id = this[i].guid; 

If (Kodo.Events[id][typel]) { 
// 如 果 这 存在 是 当前 事件 已 经 存 过 ， 不 用 在 绑 定 事件 ,直接 放 入 
Kodo.Events[id][typel].push(fn); 

} else { 
// 这 是 存 新 事件 ， 所 以 需要 重新 绑 定 一 次 
Kodo ,Events[id][type] = [fn]; 
bind(this[i], type, id); 


} 
function bind(dom, types guid) 
dom.addEventListener(type，function(e) { // 绑 定 相 应 事件 
for (var i = 0; i < Kodo.Events[guid][type].length; I++) { 
// 循 环 执行 那个 方法 数组 即 可 
Kodo.Events[guid][type][i].call(dom，e); // 正 确 的 dom 回 调 


} 
}, false); 


剧 财 
由 于 方法 过 长 ， 我 就 把 讲解 的 都 写 在 了 代码 里 ， 这 样 看 的 也 会 更 方便 一 些 。 
代码 还 是 不 够 形象 ! 我 们 来 看 看 log 就 能 更 清晰 明白 其 中 的 奥秘 。 





通过 控制 台 log 出 f.Events 发 现 正 是 我 们 想 要 的 结果 ， 每 个 dom 对 应 一 个 自己 
的 evtobj ， 通 过 Kodo.Events[guid] 可 以 得 到 指定 的 evtobj 。 然 后 即 可 取 
出 自己 相应 的 事件 。 


<div id="box”style="color: red; "> 
<U1> 
<1Li class="testLi">11</1i> 
<1i class="testLi">12</1i> 
《1i cl1ass="testLi">13</1iy> 
<li class="testLi">14</1i> 
</ul> 
</div> 
f('#box 1i').on('click',function(e) { 
console.1log(this.innerHTML); 


D); 


> f.Events 


[undefined x 1, vObject E ,， vObject E ， YO0bject 冉 ， 0bject 辐 
pclick: Array[1] pclick: Array[1] pclick: Array[1] pclick: Array[1] 
p__proto_: 0bject p__proto_: 0bject Pp_proto_: 0bject p_proto_ : 0bject 
> | 


如 果 我 继续 新 增 事件 


f('#box 1i').eq(8@).on('click',function(e) { 
console.1og(' 我 只 有 第 一 个 1i 才 会 触发 '); 
]); 


f('#box 1i').eq(8).on('touchstart' ,function(e) { 
console.1og(' 我 只 有 第 一 个 1i 才 会 触发 '); 
]); 


> f.Events 


[undefined x 1, vObject 局 :+ 了 Object 括 ， 了 0bject 司 ; YO0bject 周 ] 
pclick: Array[2] pclick: Array[1] pclick: Array[1] pclick: Array[1] 
ptouchstart: Array[1] p__proto_: Object p_proto_: Object p_proto_: Object 
bp__proto_: 0bject 


可 以 发 现 ， 我 只 针对 于 第 一 个 li 增加 了 事件 。log 出 Evnets 也 就 只 有 第 一 个 Object 有 
新 增 ， 并 且 会 增加 到 对 应 的 事件 数组 里 。 


理解 了 这 个 后 要 解除 事件 绑 定 ， 那 就 非常 简 音 了。 同样 根据 guid 查 找到 对 应 的 方法 
数组 ，delete 即 可 


off:"function(type, selector){ 
if (arguments.length == 0) { 
// 如 果 没 传 参数 ， 清 空 所 有 事件 
for (var i = 0; i < this.length; i++) { 
var id = this[i].guid; 
for (var j in Kodo.Events[id]) { 
delete Kodo.Events[id][j]; 


} 
} 
} else if (arguments.length == 1) { 
// 指 定 一 个 参数 ， 则 清空 对 应 type 的 事件 


for (var i = 0; i < this.length; i++) { 
var id = this[i].guid; 
delete Kodo.Events[id][typel]; 


一 个 没有 带 有 事件 委托 的 on、off 就 可 以 这 样 实现 了 。 
那 如 果 我 们 要 实现 带 委 托 的 怎么 办 呢 ? 
我 们 可 以 用 这 同样 的 思路 实现 ， 只 是 要 多 进行 一 个 指定 selector 的 存储 。 
这 个 我 们 就 放 在 下 一 课 最 后 讲解 。 
star 是 尊重 作者 知识 果实 最 好 的 回报 :) 


如 何 实现 自己 的 JU 


Lesson-10 


实现 on,off 的 事件 委托 ! 
我 们 能 根据 之 前 的 思路 ,利用 同样 的 方法 实现 一 个 事件 委托 . 


先 来 看 看 流程 图 


委托 元 素 


( selector ) 

















1. 新 建 id 对 象 
2. 构 造 selector 对 象 
3 .构造 事件 数组 


所 要 委托 的 事件 
(type ) 
是 否 存在 
存在 






直接 把 事件 
(type ) 
push 进 数组 


构造 事件 数组 
[type] = [fn] 


然后 先 看 看 结果 是 如 何 ， 毕 竞 流 程 图 看 的 也 不 一 定 能 懂 。 


实现 事件 委托 


如 何 实现 自己 的 jQuery 


> f.deleEvents 


[undefined x 1, voObject vObject i ， vObject 各 ] 
v#box li: Object vul li: Object vspan: 0bject 
pclick: Array[1] pclick: Array[1] pclick: Array[1] 
ptouchstart: Array[1] p_proto_: Object p_proto_: Object 
bp_proto_: Object pb_proto_: 0bject p_proto_: Object 


v#pox: Object 
ptouchstart: Array[1] 
p_proto_: Object 

p_proto_: Object 


ee 下 从 #pox ul 上 解除 span 的 click 委 托 
undefined 
> f.deleEvents 
[undefined x 1, vObject 刁 vObject | : 了 0bject 上 辕 ] 
v#box li: 0bject vul li: Object vspan: 0bject 
pclick: Array[1] pclick: Array[1] p_proto : Object 
ptouchstart: Array[1] Pp_proto_: 0bject p_proto_: 0bject 
Pp__proto_: Object Pp_proto_: Object 


v#pox: Object 
ptouchstart: Array[1] 
p_proto_: 0bject 

pb_proto_: Object 


> f{"body").off('click’, '#box 1i'); 从 body 上 解除 #box li 的 click 委 托 
undefined 
> f.deleEvents 
[undefined x 1, vObject 周 ， YObject A : YObject 刁 ] 
v#box li: Object vul li: 0bject vspan: Object 
vtouchstart: Array[1] pclick: Array[1] p_proto_: 0bject 
pO: function (e) p__proto_: 0bject Pp_proto_: Object 
length: 1 p_proto_: 0bject 
p_proto_: Array[0] 
Pp_proto_: Object 
v#pox: 0bject 
vtouchstart: Array[1] 
9: function (e) 
length: 1 
p_proto_: Array[0] 
p_proto_: Object 
p_proto_: 0bject 


最 后 我 们 再 来 看 看 代码 


Kodo .deleEvents = []; // 事 件 委 托 存放 的 事件 
Kodo .deleId = 0; // 事 件 委托 的 唯一 标识 


on: function(type, selector, fn) { 


If (typeof selector == 'function') { 
fn = selector; // 两 个 参数 的 情况 
// 事 件 绑 定 过 程 

} else { 
// 事 件 委 托 过 程 


for (var i = 0; i < this.length; i++) { 
if ( !this[I] .deleId ) { 
this[i].deleId = ++Kodo.deleId; 
// 同 样 是 判断 是 否 有 唯一 id 


Kodo .deleEvents[Kodo.deleId] = 人 ， 
// 没 有 则 创建 1d 对 象 也 就 是 f.deleEvents[] 新 开放 一 个 新 对 象 


Kodo .deleEvents[Kodo ,deleId][selector] = {}; 


// 构 造 Selector 对 象 


hs 
* 如 Kodo.deleEvents[1] = 
* | 


实现 事件 委托 32 


* "#box 1i" : {}, 
* "#pox" Ee {} 


Kodo ,deleEvents[Kodo ,deleId][selector][Ltype] = [fn. 
// 构 造 我 们 的 事件 数组 


As 

* 如 Kodo.deleEvents["#box 1i"] = 
> 

WealiiiG eee i i in 2 

wo het en | 
* 

2 


delegate(this[i],type,selector); 
// 用 委托 的 方式 进行 绑 定 
} else { 
// 如 果 d 存 在 的 情况 
var id = this[I].deleId， 
position = Kodo.deleEvents[id];// 委 托 元 素 的 事件 存 


if(!position[selector]) { 
// 先 判断 如 果 Selector 存 储 的 对 象 不 存在 
position[selector] = {}; 
// 新 建 selector 对 象 (与 上 面 的 Selector 构 造 相 同 ) 
position[selector|[type] = [fn]; 
// 构 造 事件 数组 对 象 (与 上 面 的 type 构 造 相同 ) 


delegate(this[i],type,selector); 
// 因 为 是 新 的 Selector 所 以 要 再 绑 定 
} else { 
//selector 存储 对 象 存在 的 情况 
If ( position[selector][Ltype] ) { 
// 如 果 事 件数 组 已 经 有 了 ， 则 直接 push 进 来 
position[selector|][type].push(fn); 





} else { 
// 如 果 事 件数 组 没有 ， 那 就 构造 事件 数组 
position[selector|][type] = [fn]; 





// 因 为 是 新 的 绑 定 的 事件 ， 所 以 要 重新 绑 定 
delegate(this[i],type,selector); 





继续 再 看 一 遍 log 的 结果 ， 对 比 刚刚 的 代码 


如 何 实现 自己 的 jQuery 


> f.deleEvents 


[undefined x 1, vObject , vObject , vObject ] 
v#box li: 0bject vul li: Object vspan: 0bject 
pclick: Array[1] pclick: Array[1] pclick: Array[1] 
ptouchstart: Array[1] p_proto_: Object p_proto_: Object 
_Pproto_: Object pb_proto_: 0bject Pp_proto_: Object 


v#pox: Object 
ptouchstart: Array[1] 
p_proto_: Object 

p_proto_: 0bject 


> fi“*Bpox vl"} .off("click’, “spen')s 从 #pox ul 上 解除 span 的 click 委 托 
undefined 
> f.deleEvents 
[undefined x 1, vObject vObject : 了 Object ] 
v#box li: 0bject vul li: Object vspan: 0bject 
pclick: Array[1] pclick: Array[1] p_proto_: 0bject 
ptouchstart: Array[1] p_proto_: 0bject pb_proto_: 0bject 
proto__: Object p_proto_: Object 


v#pox: 0bject 
ptouchstart: Array[1] 
_Pproto_: Object 
pb__proto_: 0bject 


f{"body").off('click’, '#box 1i'); 从 body 上 解除 #box li 的 click 委 托 


v 


undefined 
> f.deleEvents 
[undefined x 1, vObject ) 了 0bject ，， 了 Object ] 
v#box li: 0bject vul li: 0bject vspan: Object 
vtouchstart: Array[1] pclick: Array[1] p_proto_: 0bject 
pO: function (e) p__proto_: 0bject p_proto_: Object 
length: 1 Pp__proto_: 0bject 


_proto_: Array[0] 
p__proto_: Object 
v#pox: 0bject 
vtouchstart: Array[1] 
9: function (e) 
length: 1 
_proto_: Array[9] 
_proto_: 0bject 
_proto_: 0bject 


连同 代码 ， 我 在 注释 里 已 经 非常 的 详细 解释 了 整个 过 程 ， 大 家 结合 控制 台 log 的 结 
果 ， 在 看 看 最 初 的 流程 图 结合 的 看 ， 我 相信 有 点 点 耐心 就 能 马上 理解 了 。 


绑 定 过 程 都 会 比较 复杂 ， 理 解 了 绑 定 过 ， 下 面 off 的 实现 就 很 容易 了 。 


ee 
selector 


off: function(type, selector) { 
if (arguments.length == 0) { 
// 如 果 没 传 参数 ， 清 空 所 有 事件 


} else if (arguments.length == 1) { 
// 指 定 一 个 参数 ， 则 清空 对 应 的 事件 


} else 
直接 根据 dom 上 存 有 的 deleId， 找 到 对 应 的 deleEvents 里 的 位 置 
// 删 除 委 托 元 素 上 的 type 事 件数 组 即 可 
for (var i = 0; i < this.length; I++) { 
var id = this[i].delelId; 
delete Kodo.deleEvents[idl][selector][typel]; 


实现 事件 委托 


最 后 看 看 我 们 修改 过 后 的 delegate 方 法 


function delegate(agent, type, selector) { 
var id = agent.deleId; // 先 获取 被 委托 元 素 的 deleId 
agent.addEventListener(type, function(e) { 
var target = e.target,; 
var ctarget = e.currentTarget,; 
var bubble = true; 


while (bubble && target != ctarget) { 
if (filiter(agent, selector, target)) { 
for (var i = 0; i < Kodo.deleEvents[id][selector]I[i1 
bubble = Kodo.deleEvents[id]j[selector][typel]l[i 
// 循 环 事件 数组 直接 call 
} 
} 
target = target.parentNode; 
return bubble; 


} 
}, false); 


function filiter(agent, selector, target) { 
// 过 滤 有 函数 





这 里 修改 的 就 只 有 二 个 地 方 


1. 获 取 被 委托 元 素 的 deleld， 因 为 我 们 整个 委托 机 制 都 与 他 有 关 。 2. 通 过 id 在 
deleEvents 里 查找 对 应 的 事件 数组 ， 循 环 执 行 即 可 


以 上 就 是 整个 委托 的 过 程 ! 


f("you").on('star', 'me',function(){ 
console.log('success!'); 


}); 


Lesson-11 


新 增 width,height,extend 
事件 部 分 讲 完了 后 ,我 们 最 后 实现 3 个 方法 . 


width : function(w) { 
if(arguments.length == 1) { 
for (var i = 0; i < this.length; i++) { 
this[i].style.width = w+ 'px'; 


} 
} else { 
if (this[0].document === doc ) { 
return this[0].innerwidth,; 
} else if (this[0].nodeType === 9 ){ 
return document.documentElement.clientwidth; 
} else { 
return parseInt(getComputedStyle(this[0],null)['width"- 





height() 就 党 用 的 就 2 种 ,一 个 是 取 值 ,一 个 是 赋值 . 

我 们 通过 判断 arguments 的 个 数 ,是 取 值 还 是 赋值. 

赋值 很 容 多 ,我 们 就 用 最 简单 的 办 法 ,直接 设置 . 

如 果 是 取 值 , 那 我 们 就 要 做 个 判断 ,因为 window, 和 document 的 取 法 是 不 一 样 的 . 


还 有 一 种 可 能 性 是 ， ee oii 时 候 , 直 接 取 是 取 不 到 的 .在 这 我 就 
不 做 处 理 了 .大 家 思考 一 下 可 以 自己 党 


思路 是 把 dom 设 置 为 position:absolute;visible:hidden; 然 后 取 , 在 设置 回去 . 
同 理 height 方 法 也 是 如 此 .我 就 直接 给 出 代码 了 


height : function(h) { 
if(arguments.length == 1) { 
for (var 1 = 0; i < this.length; i++) { 
this[i].style.height = h + 'px'; 


} else { 
if(this[0].document === doc ) { 
return this[0].innerHeight; 
} else if (this[0].nodeType === 9 ){ 


return document.documentElement.clientHeight; 
} else { 


return parseInt(getComputedStyle(this[0],null)['height 





两 者 几乎 相同 只 是 改 了 API, 其 实 完全 可 以 封装 为 一 个 方法 复 用 . 


jQuery 之 所 以 那么 广 受 大 众 所 爱 ,还 一 个 非常 重要 的 就 是 他 的 extend 方 法 .如 果 没 有 
了 他 ,将 不 会 有 现在 那么 多 jQuery 插件 的 诞生 


在 此 ,我 们 就 实现 一 个 非常 简单 的 浅 拷贝 .( 然 而 jQuery 的 extend 非 常 强大 ) 
Kodo.prototype.extend = Kodo.extend = function() { 
var options = arguments[0]; 
for( var i in options) { 


this[i] = options[i]; 
} 


jp 


这 个 方法 我 们 不 仅 要 能 拓展 静态 方法 ,也 要 能 拓展 实例 方法 . 

所 以 Kodo.prototype.extend = Kodo.extend = 直接 这 样 写 了 . 
里 面 内 容 过 于 简陋 就 不 过 多 讲解 了 :) 

然后 我 们 就 能 这 样 拓展 我 们 的 插件 了 


f.prototype.extend({ // 实 例 方法 
alert : function(msg) { 
alert(msg) 


}); 
f.extend({ // 静 态 方法 
alert : function(msg) { 
alert(msg) 


} 
3 
f.alert('123' );// 人 调用 
f("div").alert('123');// 调 用 


其 实 jQuery 还 有 很 多 别 的 部 分 ,比如 队列 ,动画 ,异步 .都 是 一 些 非常 值得 自己 去 实践 党 
试 的 . 


但 至 此 ,我 们 的 小 轮子 基本 也 就 完结 了 
另外 的 手势 番外 篇 ,本 想 直 接 集 成 在 这 里 面 .如 果 有 大 众 所 需 ,我 就 继续 更 下 去 
您 连 11 节 的 课程 都 有 耐心 看 完 ,何必 不 顺手 点 下 右上 角 的 star 呢 ? >.< 


